<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue3中的响应式原理</title>
</head>
<body>
<script>
    //源数据
    let person = {
        name: '张三',
        age: 18
    }
    //模拟vue2中的响应式原理
    let p = {}
    Object.defineProperty(p, 'name', {
        get: function () {
            //有人读取name时调用
            return person.name
        },
        set: function (v) {
            console.log('有人修改了name属性,重新渲染页面')//实现响应式
            //有人修改name时读取
            person.name = v
        }
    })
    //模拟vue3中的响应式原理
    const x = new Proxy(person, {
        //读取某个属性时调用
        get(target, key) {
            console.log('有人读取了', target, '中的', key) //使用proxy中的get实现响应式
            return target[key] //这里真正操作源数据

        },
        //修改/增加某个属性时调用
        set(target, key, value) {
            console.log('有人修改了', target, '中的', key, '修改后的值为', value)//使用proxy中的set实现响应式
            return target[key] = value  //这里真正操作源数据
        },
        //删除某个属性时调用
        deleteProperty(target, key) {//删除时实现响应式
            console.log('有人删除了', target, '中的', key)
            // return delete target[key] //这里真正操作源数据
            return Reflect.deleteProperty(target, key) //vue3中真正操作数据是通过reflect反射进行操作的
        }

    })//Proxy是window自带的一个方法,用于做代理,可以将代理对象映射源对象的操作,这里只是完成了数据代理,没有实现响应式
    //实际上vue3中使用了Reflect反射对数据进行操作   Reflect.get/set/deleteProperty(),虽然通过其他方式也能实现,但是对于框架封装来说,Reflect比较友好


</script>
</body>
</html>